<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import LogoIcon from '@/components/LogoIcon.vue'

const headPortraitData = ref('')

onMounted(() => {
  if(localStorage.getItem('myData')) {
        let arr = localStorage.getItem('myData') as string
        headPortraitData.value = JSON.parse(arr).face
        console.log('*** my ***', headPortraitData.value)
    }
})
</script>

<template>
  <header>
    <div class="fixed top-0 left-0 right-0 h-11 z-50 bg-white">
      <nav class=" flex justify-between items-center px-3">
        <RouterLink to="/" style="fill: #fb7299;">
          <LogoIcon />
        </RouterLink>
        <div class=" flex">
          <RouterLink to="/search">
            <span class="iconfont icon-sousuo"></span>
          </RouterLink>
          <RouterLink to="/my">
            <img :src="headPortraitData" alt="" class=" w-6 h-6 rounded-full ml-4">
          </RouterLink>
          <img src="" class=" mx-2" alt="">
          <RouterLink to="/live" style="background-color: #fb7299;" class=" w-16 px-3 rounded-md text-center text-white">直播</RouterLink>
        </div>
        <!-- <RouterLink to="/login">登录</RouterLink> -->
      </nav>
    </div>
  </header>
  <RouterView class=" pt-11" v-slot="{ Component }">
    <KeepAlive>
      <component :is="Component" :key="$route.fullPath" v-if="$route.meta.keepAlive" />
    </KeepAlive>
    <component :is="Component" :key="$route.fullPath" v-if="!$route.meta.keepAlive" />
  </RouterView>

</template>

<style scoped>

</style>
